<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>My JSP 'zCell.jsp' starting page</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge;IE=11;IE=9;IE=8;">
	<script src="/third/js/jquery.min.js"></script>
    <script type="text/javascript" src="/third/zcell/ZCell.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/third/zcell/ZCell.min.css" />
    <script src="/js/plat/DsyZcell.js"></script>

<style>

        .contextmenu {
            display: none;
            position: absolute;
            width: 150px;
            height: 150px;
            margin: 0;
            padding: 0;
            background: #FFFFFF;
            border-radius: 5px;
            list-style: none;
            box-shadow: 0 15px 35px rgba(50,50,90,0.1), 0 5px 15px rgba(0,0,0,0.07);
            overflow-y:auto;
            z-index: 999999;
        }

            .contextmenu li {
                border-left: 3px solid transparent;
                transition: ease .2s;
            }

                .contextmenu li a {
                    display: block;
                    padding: 10px;
                    //color: #B0BEC5;
                    color: black;
                    text-decoration: none;
                    transition: ease .2s;
                }

                .contextmenu li:hover {
                    //background: #CE93D8;
                    background: #D3F0E0;
                    border-left: 3px solid #9C27B0;
                }


        .input_button {
            font-size: 13px;
            height: 22px;
            border:1px solid #A5A5A5;
        }

    </style>
</head>
  
<body style="overflow-x: hidden;">
	<div style="margin:5px;">
		<input type="button" id="loadExcel" value="导入表头" class="input_button" style="display:none">
		<input type="button" id="btnLeft" value="左对齐" class="input_button"/>
		<input type="button" id="btnCenter" value="居中对齐" class="input_button"/>
		<input type="button" id="btnRight" value="右对齐" class="input_button"/>
	    <input type="button" value="合并单元格" id="btnMerge" class="input_button"/> 
	    <input type="button" value="取消合并单元格" id="btnUnMerge" class="input_button"/> 
	    <input type="button" value="添加边框" id="btnAddBorder" class="input_button"/>
	    <input type="button" value="导出表头" id="exportExcel" class="input_button" style="display:none"/>
	    <input type="button" value="去除边框" id="delCellBorder" class="input_button"/>
	    <input type="button" value="获取数据" id="getDataSource" class="input_button" style="display:none"/>
	    <input type="button" value="导入数据" id="importData" class="input_button" style="display:none"/>
  	</div>	
	<div class="sample-turtorial">
	    <div id="cellContainer" style="width:100%; height:92.5%;border: 1px solid gray"></div>
	</div>
	<ul class="contextmenu">
        <li><a href="javascript:void(0) ;  onclick=execmenu('insertRow');">插入行</a></li>
        <li><a href="javascript:void(0) ;  onclick=execmenu('deleteRow');">删除行</a></li>
        <li><a href="javascript:void(0) ;  onclick=execmenu('insertCol');">插入列</a></li>
        <li><a href="javascript:void(0) ;  onclick=execmenu('deleteCol');">删除列</a></li>
    </ul>
</body>
<script type="text/javascript">
//页面加载时，执行
var zcell1;
//创建JSCELL，指明承载容器
zcell1 = new ZCell(document.getElementById("cellContainer"));
var ZcellObject = new ZcellUtil(zcell1);

//页面加载时执行
$(document).ready(function () {
	var row = parseInt(window.parent.deep);
	if(row < 10){
		row = 10;
	}
	
	var col = parseInt(window.parent.columnsNum);
	if(col < 12){
		col = 12;
	}
    //创建表，并指定列，行数
    zcell1.InserSheet(0, col, row);
    //加载数据
    //zcell1.GetSheet(0).LoadArrData(jsondata);

  //设置自定义右键菜单
    ZcellObject.customContextMenu(function (e) {
       setmenu(e);
    });
  //设置自定义右键菜单
    ZcellObject.cellClick(function(e){
    	if(ZcellObject.getCurrentColNo() == -1){
    		return; 
    	}
    	var col = e.target.colNo;
		var colCount = e.target.colSpan;
		var row = e.target.rowNo;
		var rowCount = e.target.rowSpan;
		if(!col){
			return;
		}
		row = getFieldCell(row,col);
		if(row == 1 && !ZcellObject.getCellValue(1, col)){
			row = e.target.rowNo;
		}
		var cellValue = ZcellObject.getCellValue(row,col);
		var cellId = ZcellObject.getCellProperty(row,col);
		if(!cellId){
			cellId = GUID.createGUID();
			ZcellObject.setCellProperty(row,col,cellId);
		}
		var colCountFlag = false;
		if(colCount > 1){
			colCountFlag = true;
		}
		window.parent.fieldConfigChange(cellId,cellValue,row,col,rowCount,colCountFlag,"string");
    });
  
    ZcellObject.cellValueChangeAfter(function(e){
    	var col = e.target.colNo;
		var row = e.target.rowNo;
		var cellId = ZcellObject.getCellProperty(row, col);
		var cellValue = ZcellObject.getCellValue(row, col);
		if(cellId){
			window.parent.fieldTitleChange(cellId,cellValue);
		}
		//var editValue = args.editingText;
		// window.parent.fieldTitleChange(cellId,editValue);
    });
  
    //隐藏右键菜单
    $(document).click(function () {
        $(".contextmenu").hide();
    });
    
    $("#btnLeft").click(function(){
    	ZcellObject.changeCellAlignType("left");
	});
	$("#btnCenter").click(function(){
		ZcellObject.changeCellAlignType("center");
		execmenu("center");
	});
	$("#btnRight").click(function(){
		ZcellObject.changeCellAlignType("right");
	});
	$("#btnMerge").click(function(){
		ZcellObject.mergeCell();
	});
	$("#btnUnMerge").click(function(){
		ZcellObject.unmergeCell();
	});
	$("#btnAddBorder").click(function(){
		ZcellObject.addCellBorder();
	});
	$("#delCellBorder").click(function(){
		ZcellObject.delCellBorder();
	});
	
	ZcellObject.mouseup(function(e){
		if(window.parent.dropValue){
			var text = window.parent.dropValue.text;
			var code = window.parent.dropValue.code;
			var dataType = window.parent.dropValue.data_type;
			var cellName = e.target.name;
			var col = e.target.colNo;
			var row = e.target.rowNo;
			var colSpan = e.target.colSpan;
			if (col && row && colSpan == 1) {
				var cellValue = ZcellObject.getCellValue(row,col);
				if(!cellValue || (cellValue && $(ZcellObject.getCell(row,col))[0].readonly == 1)){
					row = getFieldCell(row,col);
					if(row == 1 && !ZcellObject.getCellValue(1, col)){
						alert("请先配置表头");
						return;
					}
				}
				if(ZcellObject.getCellValue(row, col)){
					text = ZcellObject.getCellValue(row, col);
				}
				var colCount = $(ZcellObject.getCell(row, col))[0].colSpan;
				var rowCount = $(ZcellObject.getCell(row, col))[0].rowSpan;
				ZcellObject.setCellReadOnly(row + rowCount, col, 0);
				ZcellObject.setCellValue(row + rowCount, col, code);
				ZcellObject.setCellReadOnly(row + rowCount, col, 1);
				ZcellObject.moveToCell(row, col);
				var cellId = ZcellObject.getCellProperty(row,col);
				if(!cellId){
					cellId = GUID.createGUID();
					ZcellObject.setCellProperty(row,col,cellId);
				}
				if(dataType == 1){
					dataType = "string";
				}else{
					dataType = "float";
				}
				window.parent.configColumnsChange(cellId,code,text);
				window.parent.fieldConfigChange(cellId,text,row,col,rowCount,false,dataType);
			}
		}
	});
	  
	ZcellObject.mousemove(function(e){
		var drag = document.getElementById("dragDivChild");
		if(window.parent.dropValue){
			//var drag = window.parent.document.getElementById("dragDiv");
			window.parent.dragDisable();
      		if(drag){
      			drag.innerHTML = '<image src="/image/sysbutton/yunxu.png"'+
      							' style="width:16px;height:16px;margin:2px 2px 0 2px;"/>'+window.parent.dropValue.text;
      			$("#dragDivChild").css('display','block');
      		}else{
      			var dragDiv = document.createElement('div');
          		dragDiv.innerHTML = '<image src="/image/sysbutton/yunxu.png"'+
          							' style="width:16px;height:16px;margin:2px 2px 0 2px;"/>'+window.parent.dropValue.text;
          		dragDiv.style.display = "none";
          		dragDiv.style.cssText = "position:absolute;height:22px;border:1px solid #C0C0C0;"+
          								"line-height:22px;vertical-align:middle;font-size:10px;"
          		dragDiv.id = "dragDivChild";
      		    //Odiv.className="Box";                    //div的class为Box
      		    document.body.appendChild(dragDiv);        //在body内创建一个div
      		    drag = document.getElementById("dragDivChild");
			}
		}
		$(document).bind('mousemove', function(move_e){
			if(drag){
				drag.style.left = move_e.screenX-250 + "px";
	    		drag.style.top = move_e.screenY-320 +  "px";
			}
    	}).bind('mouseup', function(up_e){
    		if(drag){
    			window.parent.dropValue = null;
	    		$("#dragDivChild").css('display','none');
    		}
		}).bind('mouseout', function(up_e){
    		if(drag){
    			window.parent.dragEnable();
	    		$("#dragDivChild").css('display','none');
    		}
		});
	});
	setColumnConfig(window.parent.headerList,window.parent.deep);
});

//自定义右键菜单
function setmenu(e) {

    //Get window size:
    var winWidth = $(document).width();
    var winHeight = $(document).height();
    //Get pointer position:
    var posX = e.pageX;
    var posY = e.pageY;
    //Get contextmenu size:
    var menuWidth = $(".contextmenu").width();
    var menuHeight = $(".contextmenu").height();
    //Security margin:
    var secMargin = 10;
    //Prevent page overflow:
    if (posX + menuWidth + secMargin >= winWidth
        && posY + menuHeight + secMargin >= winHeight) {
        //Case 1: right-bottom overflow:
        posLeft = posX - menuWidth - secMargin + "px";
        posTop = posY - menuHeight - secMargin + "px";
    }
    else if (posX + menuWidth + secMargin >= winWidth) {
        //Case 2: right overflow:
        posLeft = posX - menuWidth - secMargin + "px";
        posTop = posY + secMargin + "px";
    }
    else if (posY + menuHeight + secMargin >= winHeight) {
        //Case 3: bottom overflow:
        posLeft = posX + secMargin + "px";
        posTop = posY - menuHeight - secMargin + "px";
    }
    else {
        //Case 4: default values:
        posLeft = posX + secMargin + "px";
        posTop = posY + secMargin + "px";
    };

    //显示菜单
    $(".contextmenu").css({
        "left": posLeft,
        "top": posTop
    }).show();
}

//执行右键菜单事件
function execmenu(item) {
    if (item == "insertRow") {   //合并选定的单元格
    	var row = ZcellObject.getCurrentRowNo();
    	ZcellObject.insertRow(row,1);
    }else if (item == "deleteRow") { //拆分单元格
    	var row = ZcellObject.getCurrentRowNo();
    	ZcellObject.deleteRow(row,1);
    }else if(item == "insertCol"){
    	var col = ZcellObject.getCurrentColNo();
    	ZcellObject.insertCol(col,1);
    }else if(item == "deleteCol"){
    	var col = ZcellObject.getCurrentColNo();
    	ZcellObject.deleteCol(col,1);
    }
}

function setColumnConfig(data,deep,columnsNum){
	ZcellObject.setDataSource(data,deep);
}

function getFieldCell(row,col){
	if(row == 1||(ZcellObject.getCellValue(row, col) && $(ZcellObject.getCell(row, col))[0].readonly != 1)){
		return $(ZcellObject.getCell(row, col))[0].rowNo;
	}
	row--;
	return getFieldCell(row,col);
}

function getCellValue(row,col,value){
	ZcellObject.getCellValue(row, col);
}

function setCellValue(row,col,value){
	ZcellObject.setCellValue(row, col, value);
}

function lockCell(row,col){
	ZcellObject.setCellReadOnly(row, col, 1);
}

function unlockCell(row,col){
	ZcellObject.setCellReadOnly(row, col, 0);
}

function getCells(){
	return ZcellObject.getCells();
}

function getCellProperty(){
	return ZcellObject.CellProperty;
}

/**
 * 通用函数：字符串全局替换
 */
String.prototype.replaceAll = function (s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
};

/*
 * 功能：生成一个GUID码，其中GUID以14个以下的日期时间及18个以上的16进制随机数组成，GUID存在一定的重复概率，但重复概率极低，理论上重复概率为每10ms有1/(16^18)，即16的18次方分之1，重复概率低至可忽略不计
 */
function GUID() {
    this.date = new Date();
    /* 判断是否初始化过，如果初始化过以下代码，则以下代码将不再执行，实际中只执行一次 */
    if (typeof this.newGUID != 'function') {
        /* 生成GUID码 */
        GUID.prototype.newGUID = function () {
            this.date = new Date();
            var guidStr = '';
            sexadecimalDate = this.hexadecimal(this.getGUIDDate(), 16);
            sexadecimalTime = this.hexadecimal(this.getGUIDTime(), 16);
            for (var i = 0; i < 9; i++) {
                guidStr += Math.floor(Math.random() * 16).toString(16);
            }
            guidStr += sexadecimalDate;
            guidStr += sexadecimalTime;
            while (guidStr.length < 32) {
                guidStr += Math.floor(Math.random() * 16).toString(16);
            }
            return this.formatGUID(guidStr);
        };
        /*
         * 功能：获取当前日期的GUID格式，即8位数的日期：19700101
         * 返回值：返回GUID日期格式的字条串
         */
        GUID.prototype.getGUIDDate = function () {
            return this.date.getFullYear() + this.addZero(this.date.getMonth() + 1) + this.addZero(this.date.getDay());
        };
        /*
         * 功能：获取当前时间的GUID格式，即8位数的时间，包括毫秒，毫秒为2位数：12300933
         * 返回值：返回GUID日期格式的字条串
         */
        GUID.prototype.getGUIDTime = function () {
            return this.addZero(this.date.getHours()) + this.addZero(this.date.getMinutes()) + this.addZero(this.date.getSeconds()) + this.addZero(parseInt(this.date.getMilliseconds() / 10));
        };

        /*
         * 功能: 为一位数的正整数前面添加0，如果是可以转成非NaN数字的字符串也可以实现
         * 参数: 参数表示准备再前面添加0的数字或可以转换成数字的字符串
         * 返回值: 如果符合条件，返回添加0后的字条串类型，否则返回自身的字符串
         */
        GUID.prototype.addZero = function (num) {
            if (Number(num).toString() != 'NaN' && num >= 0 && num < 10) {
                return '0' + Math.floor(num);
            } else {
                return num.toString();
            }
        };
        /*
         * 功能：将y进制的数值，转换为x进制的数值
         * 参数：第1个参数表示欲转换的数值；第2个参数表示欲转换的进制；第3个参数可选，表示当前的进制数，如不写则为10
         * 返回值：返回转换后的字符串
         */
        GUID.prototype.hexadecimal = function (num, x, y) {
            if (y != undefined) {
                return parseInt(num.toString(), y).toString(x);
            } else {
                return parseInt(num.toString()).toString(x);
            }
        };
        /*
         * 功能：格式化32位的字符串为GUID模式的字符串
         * 参数：第1个参数表示32位的字符串
         * 返回值：标准GUID格式的字符串
         */
        GUID.prototype.formatGUID = function (guidStr) {
            var str1 = guidStr.slice(0, 8) + '-',
                str2 = guidStr.slice(8, 12) + '-',
                str3 = guidStr.slice(12, 16) + '-',
                str4 = guidStr.slice(16, 20) + '-',
                str5 = guidStr.slice(20);
            return str1 + str2 + str3 + str4 + str5;
        }
    }
}
GUID.createGUID = function () {
    return new GUID().newGUID().replaceAll('-', '');
};

</script>
</html>
